{% extends "templates/panoptic_base.html" %}

{% block title %}Panoptic - Case Studies{% endblock %}

{% block meta_block %}
{% include "templates/includes/meta_block.html" %}
{% endblock %}

{% block content %}
<section class="container border-b">
	<div class="flex flex-wrap justify-between border-l border-r border-b">
		<div class="w-full md:w-2/3 px-5 md:px-8 lg:px-12 py-5">
			<h1 class="md:truncate text-2xl md:text-4xl text-orange-500">
				{% if current_category %}
				{{ "Updates" if current_category == "Update" else "Case Studies" }}
				{% else %}
				Updates and Case Studies
				{% endif %}
			</h1>
			<p class="mt-3">Read our detailed analysis of every FRT Project which is being deployed in the country. The
				case study will look at the background of the project, how many people it will affect and its scope and
				legality.</p>

			{% if current_state %}
			<p class="mt-2">
				{% if current_category in ["Update", "Case Study"] %}
				Showing all {{ "updates" if current_category == "Update" else "case studies" }} with FRTs from
				{{ current_state }}
				{% else %}
				Showing all article with FRTs from {{ current_state }}
				{% endif %}
			</p>
			{% endif %}
		</div>
		<div class="hidden md:block w-full md:w-1/3 md:px-8 lg:px-12 p-5">
			<div class="flex flex-wrap">
				<div class="w-full">
					<label class="block">
						<span class="text-gray-700">Category</span>
						<select id="category_select"
							class="form-select bg-teal-blue-700 border-none text-teal-blue-200 mt-1 block w-full">
							<option>All</option>
							<option {{ "selected" if current_category == "Update" else "" }} value="Update">
								Updates</option>
							<option {{ "selected" if current_category == "Case Study" else "" }} value="Case Study">Case
								Studies
							</option>
						</select>
					</label>
				</div>

				{% if states|length %}
				<div class="w-full mt-4">
					<label class="block">
						<span class="text-gray-700">State</span>
						<select id="state_select"
							class="form-select bg-teal-blue-700 border-none text-teal-blue-200 mt-1 block w-full">
							<option>All</option>
							{% for state in states|sort %}
							<option {{ "selected" if state == current_state else "" }}>{{ state }}</option>
							{% endfor %}
						</select>
					</label>
				</div>
				{% endif %}
			</div>
		</div>
	</div>
	<div class="flex flex-wrap border-r border-l">
		{% if articles|length %}
		{% for article in articles %}
		{{ web_block(
					"Article List Item",
					values=article,
					add_container=0,
					add_top_padding=0,
					add_bottom_padding=0,
				) }}
		{% endfor %}
		{% else %}
		<div class="p-5 md:p-8 lg:p-12">
			{% if current_state or current_cateogry %}
			<h3>No Articles Match this Filter</h3>
			{% else %}
			<h3>We got your back!</h3>
			{% endif %}
			<p class="max-w-lg mt-3">
				We are actively working to expand our repository of information we have on facial recognition in India.
				We shall keep posting more case studies and updates, follow us on social media to stay up to date.
			</p>
			{% if current_state or current_cateogry %}
			<button class="mt-5 px-4 py-3 hover:bg-teal-blue-800 bg-teal-blue-700 rounded-sm"
				onclick="reset_filter()">Clear the Filters</button>
			{% endif %}
		</div>
		{% endif %}
	</div>
</section>
{% endblock %}


{% block script %}
<script>
	const set_filter = function () {
		let filters = "?"
		if (state_select.value && state_select.value != "All") {
			filters = `${filters}&state=${state_select.value}`;
		}

		if (category_select.value && category_select.value != "All") {
			filters = `${filters}&category=${category_select.value}`;
		}

		window.location.replace(`${window.location.origin}${window.location.pathname}${filters}`);
	}

	const reset_filter = function () {
		window.location.replace(`${window.location.origin}${window.location.pathname}`);
	}

	const state_select = document.getElementById("state_select");
	const category_select = document.getElementById("category_select");
	state_select.onchange = set_filter;
	category_select.onchange = set_filter;
</script>
{% endblock %}